<template>
	<view>
		<uni-nav-bar title="数据中心"></uni-nav-bar>

		<form class='loginView' @submit="bindLogin">
			<view class="input-view">
				<view class="label-view">
					<text class="label">账号</text>
				</view>
				<input class="input" type="text" placeholder="请输入账号" name="nameValue" />
			</view>
			<view class="input-view">
				<view class="label-view">
					<text class="label">密码</text>
				</view>
				<input class="input" password placeholder="请输入密码" name="passwordValue" />
			</view>
			<view class="button-view">
				<button type="primary" class="login" formType="submit">登录</button>
			</view>
		</form>



	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import socket from 'plus-websocket';
	export default {
		components: { uniNavBar },

		data() {
			return {
				loading: false,
				login:{
					username:'',
					password:'',
					type:'1'
				}
			}
		},

		methods: {
			bindLogin(e) {
				// console.log(e);
				this.loading = true;
				this.login.username = e.detail.value.nameValue,
				this.login.password = e.detail.value.passwordValue;
				console.log(this.login.username, this.login.password)

				if (this.login.username.lemgth <= 0) {
					this.loading = false;
					uni.showModal({
						content: "账号不能为空",
						showCancel: false
					})
					return;
				}

				if (this.login.password.length <= 0) {
					this.loading = false;
					uni.showModal({
						content: "密码不能为空",
						showCancel: false
					})
					return;
				}
				if (this.login.username === 'admin' && this.login.password === '123456') {
					this.loading = true;
					const homeLoginPath = {
						company: "STQ",
						api: "pc_home_login",
						version: "1.0",
						data: this.login
					};
					socket.sendSocketMessage({
						data: JSON.stringify(homeLoginPath)
					});

					this.getData();
				} else {
					uni.showModal({
						content: "账号或密码填写错误",
						showCancel: false
					})
					return;
				}



			},
			getData() {
				socket.onSocketMessage(function (res) {
					if (res && res !== '{"type":"ping"}') {
						const resj = JSON.parse(res.data);
						if (resj.code === -1) {
							this.$message.error(resj.message);
							this.loading = false;
						} else {
							if(resj.api==="pc_home_login"){
                                let list = JSON.stringify(resj.data)
								console.log("返回数据状态:" + list);
								uni.setStorage({
									key: 'login_key',
									data: 'hello',
									success: function () {
										console.log('success');
									}

								})

								uni.showToast({
									title: resj.message,
									icon: 'none',
									duration: 2000,
									position: 'center'
								});

                            }
							
						}
					}
				});
			},


		}



	}  
</script>

<style>
	page {
		background-color: lightgray;
	}


	.loginView {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 750upx;
		padding-top: 30upx;
	}

	.input-view {
		border-bottom-style: solid;
		border-bottom-width: 3upx;
		border-bottom-color: #ddd;
		background-color: #fff;
		flex-direction: row;
		width: 750upx;
		padding: 20upx 20upx;
		box-sizing: border-box;
	}

	.label-view {
		width: 100upx;
		height: 60upx;
		align-items: center;
		margin-right: 30upx;
	}

	.label {
		flex: 1;
		line-height: 60upx;
		font-size: 34upx;
		color: #555;
		text-align: left;
	}

	.input {
		flex: 1;
		height: 60upx;
		font-size: 34upx;
		align-items: center;
	}

	.button-view {
		width: 750upx;
		margin-top: 50upx;
		padding: 0 20upx;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	button {
		width: 710upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 34upx;
		margin-bottom: 30upx;
	}

	button.register {
		margin-top: 30upx;
		color: #ff80ab;
		background-color: #fff;
		border-color: #ff80ab;
		border-width: 2upx;
	}

	/* .register.hover,
        .login.hover {
            opacity: 0.6;
        } */
	.getPassword {
		color: #888888;
	}
</style>